<template>
    <div class="RowPage5">
        <div v-if="orderLineChart">
            <card-item :data="cardData1" :flex="5" :min_width="542">
                <div class="top">
                    <p class="tag">单位：笔</p>
                    <div class="data">
                        <div>
                            <h3 id="orderMaxNumber"></h3>
                            <p>订单最高值</p>
                        </div>
                        <div>
                            <h3 id="orderAverageNumber"></h3>
                            <p>订单平均值</p>
                        </div>
                        <div>
                            <h3 id="orderMinNumber"></h3>
                            <p>订单最低值</p>
                        </div>
                    </div>
                </div>
                <div id="leftChart"></div>
            </card-item>

            <card-item :data="cardData2" :flex="5" :min_width="542">
                <div class="top">
                    <p class="tag">单位：笔</p>
                </div>
                <div id="rightChart"></div>
            </card-item>
        </div>

        <el-skeleton v-else animated style="width: 100%">
            <template slot="template">
                <el-skeleton-item
                    style="width: 100%; height: 260px; margin: 12px"
                />
            </template>
        </el-skeleton>
    </div>
</template>

<script>
import { numberDance } from '@/utils/numberDance'
import { mapState } from 'vuex'

export default {
    name: 'RowPage5',
    props: {
        orderLineChart: true,
        updateTime: true
    },
    watch: {
        updateTime (val) {
            this.cardData1.time = val
            this.cardData2.time = val
        },
        allMounted (val) {
            if (val) {
                this.render_leftChart()
                this.render_rightChart()
                numberDance('orderMaxNumber', this.orderLineChart.orderMaxNumber, 71)
                numberDance('orderAverageNumber', this.orderLineChart.orderAverageNumber, 23)
                numberDance('orderMinNumber', this.orderLineChart.orderMinNumber, 29)
                this.$store.commit('setCardRender', true)
            }
        },
        allRender (val) {
            if (val) this.$store.commit('setCardMounted', false)
        }
    },
    data () {
        return {
            cardData1: {
                title: '订单总量',
                time: ''
            },
            cardData2: {
                title: '订单分布',
                time: ''
            },
            data: []
        }
    },
    methods: {
        render_leftChart () {
            let myChart = this.$echarts.init(document.querySelector('#leftChart'))
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '8%',
                    right: '2%',
                    top: '8%',
                    bottom: '5%',
                    width: '100%'
                },
                xAxis: {
                    type: 'category',
                    data: ['2023-1','2023-2','2023-3','2023-4','2023-5','2023-6','2023-7','2023-8','2023-9','2023-10','2023-11','2023-12']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.orderLineChart.monthlyOrderList.map(e => e.orderNumber),
                        type: 'line',
                        symbolSize: 7,
                        color: '#F85C38',
                        symbol: 'circle',
                        lineStyle: {
                            width: 1
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'transparent'
                                }, {
                                    offset: 1, color: '#FDE3DE'
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        },
        render_rightChart () {

        }
    },
    computed: {
        ...mapState(['allMounted', 'allRender'])
    }
}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
    display: none;
}

.RowPage5 {
    > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        overflow: auto;

        .top {
            > p {
                font-size: 14px;
                color: #818693;
            }

            .data {
                display: flex;
                justify-content: space-evenly;

                div {
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    h3 {
                        font-size: 28px;
                        color: #E15536;
                        margin: 25px 0 5px 0;
                    }

                    p {
                        font-size: 12px;
                        color: #818693;
                    }
                }
            }
        }

        #leftChart {
            height: 400px;
        }

        #rightChart {
            height: 100%;
        }

    }
}
</style>
